<template>
  <div class="main_box">
    <div class="detail_wrap">
      <div class="tit">
        <h2>基础信息</h2>
        <el-button plain size="small" type="success" icon="fa fa-mail-forward" @click="returnList"> 返 回</el-button>
      </div>
      <div class="con">
        <ul>
          <li>
            <label class="label">科室名称:</label>
            <span>{{officeData.officeName}}</span>
          </li>
          <li v-if="officeData.hospitalId">
            <label class="label">所属医院:</label>
            <span>{{officeData.hospitalName}}</span>
          </li>
          <li>
            <label class="label">主任姓名:</label>
            <span>{{officeData.leadName}}</span>
          </li>
          <li>
            <label class="label">主任电话:</label>
            <span>{{officeData.leadPhone}}</span>
          </li>
          <li>
            <label class="label">科室地址:</label>
            <span>{{officeData.officeAddress}}</span>
          </li>
          <li>
            <label class="label">第三方科室Id</label>
            <span>{{ officeData.thirdOfficeId }}</span>
          </li>
          <li>
            <label class="label">关联商户分类</label>
            <span v-html="officeData.businessClassifyName"></span>
          </li>
          <li>
            <label class="label">备注:</label>
            <span>{{officeData.remark}}</span>
          </li>
          <!-- <li>
            <label class="label">是否需要结果提醒:</label>
            <span>{{formatIsRemind(officeData.isRemind)}}</span>
          </li>
          <li>
            <label class="label">关联采样价格模板编号:</label>
            <span>{{officeData.hsModelId}}</span>
          </li>
          <li>
            <label class="label">关联采样价格模板名称:</label>
            <span>{{officeData.hsModelName}}</span>
          </li>
          <li>
            <label class="label">核酸海报:</label>
            <div class="poster-btn">
              <button v-if="!officeData.hsBillUrl" @click="createHsHb">生成海报</button>
              <button v-if="officeData.hsBillUrl" @click="createHsHb">更新海报</button>
              <button v-if="officeData.hsBillUrl" @click="viewHsHb">预览海报</button>
              <button v-if="officeData.hsBillUrl" @click="downloadHsHb">下载海报</button>
            </div>
          </li>
          <li>
            <label class="label">科室核酸二维码:</label>
            <div id="qrCode" ref="qrCodeDiv"></div>
          </li>
          <li>
            <label class="label">营业执照:</label>
            <el-image :src="officeData.license" :preview-src-list="[officeData.license]">

            </el-image>
          </li>
          <li>
            <label class="label">资质证书:</label>
            <el-image :src="officeData.qualificate" :preview-src-list="[officeData.qualificate]">

            </el-image>
          </li>
           -->
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
// import Map from "@/components/Map";
import OfficeApi from "@/api/institution/office";
// import QRCode from 'qrcodejs2';

export default {
  data() {
    return {
      officeData: "",
      fullscreenLoading: false
    };
  },
  components: {
    // Map
  },
  computed: {
  },
  methods: {
    getData() {
      OfficeApi.getOffice({id: this.$route.query.id})
        .then(res => {
          if (res.status == 0 && res.data){
            this.officeData = res.data;
            // this.bindQRCode(res.data.hospitalId,res.data.officeId)
          }
        });
    },
    // bindQRCode(hospitalId, officeId) {
    //   let id = hospitalId+","+officeId
    //   new QRCode(this.$refs.qrCodeDiv, {
    //     text: 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxe7229f039bfe873b&redirect_uri=http%3A%2F%2Fh5.kanglailab.com%2FnucleicVisit&response_type=code&scope=snsapi_base&state='+id,
    //     width: 320,
    //     height: 320,
    //     colorDark: "#333333", //二维码颜色
    //     colorLight: "#ffffff", //二维码背景色
    //     correctLevel: QRCode.CorrectLevel.L//容错率，L/M/H
    //   })
    // },
    // createHsHb(){
    //   // 加载遮罩层
    //   const loading = this.$loading({
    //       lock: true,
    //       text: 'Loading',
    //       spinner: 'el-icon-loading',
    //       background: 'rgba(0, 0, 0, 0.7)'
    //   });
    //   OfficeApi.createHsHb({officeId: this.$route.query.id})
    //     .then(res => {
    //       loading.close();
    //       if (res.status == 0 && res.data){
    //         this.officeData.hsBillUrl = res.data;
    //       }
    //     })
    //     .catch(error => {
    //         loading.close();
    //         console.error(error);
    //         this.$message({
    //           message: error,
    //           type: 'warning'
    //         });
    //     });
    // },
    // viewHsHb(){
    //   window.open(this.officeData.hsBillUrl,"_blank");
    // },
    // downloadHsHb(){
    //   let url = this.officeData.hsBillUrl
    //   if (url){
    //     let name = this.$Utils.getFileNameByUrl(url)
    //     this.$Utils.downloadByBlob(url,name)
    //   }else{
    //     this.$Utils.notifyWarn("未生成海报")
    //   }
    // },
    formatDate(value) {
      return this.$Utils.formatDate(value, "yyyy-MM-dd");
    },
    formatIsRemind(val) {
      if(val==0){
        return "否"
      }else if(val==1){
        return "是"
      }
    },
    returnList() {
      this.$store.dispatch('delView', this.$route);
      this.$router.push({ path: "/institu/officeManagement" });
    }
  },
  mounted() {
    this.getData();
  }
};
</script>
<style lang="scss" scoped>
@import "@/assets/css/views/Detail.scss";
</style>
<style scoped lang="scss">

.el-image{
  margin-top: 10px;
  width: 320px;
}

.poster-btn{
      padding-bottom: 10px;
}

.poster-btn button{
  width: 124px;
  height: 33px;
  border: solid 1px white;
  border-radius: 10px;
  font-size: 15px;
  color: white;
  margin: 0 5px;
  cursor:pointer;
}

.poster-btn button:nth-child(1){
  background: #409EFF;
}

.poster-btn button:nth-child(1):hover{
  background: #66B1FF;
}

.poster-btn button:nth-child(2){
  background: #FDF6EC;
  color: #E6A23C;
  border: solid 1px #E6A23C;
}

.poster-btn button:nth-child(2):hover{
  background: #E6A23C;
  color: white;
}

.poster-btn button:nth-child(3){
  background: #F0F9EB;
  color: #67C23A;
  border: solid 1px #67C23A;
}
.poster-btn button:nth-child(3):hover{
  background: #67C23A;
  color: white;
}

</style>


